<template>
    <!-- 1、v-text 显示内置指令 -->
    <div v-text="msg"></div>
    
    <!-- 2、v-html 显示加粗的 这是xxx的页面 -->
    <div v-html="msg1" class="dv1"></div>
    
    <!-- 3、v-bind 显示 一张图片 -->
    <div class="img1">图片</div>
    <img :src="url" v-show="showImage" width="200" height="200"/><br>
    
    <!-- 4、v-on 按钮 点击按钮替换图片 -->
    <button @click="showInfor" class="btn">点击按钮更换图片</button><br>
    
    <!-- 5、v-model 姓名:input 以上是xxx完成的效果 -->
    <!-- 姓名是：<input type="text" v-model="username" />{{ username }} -->
    <input type="text" v-model="zxy"> <!-- 以上是{{zxy}}完成的效果 -->


    <!-- 新增的姓名输入部分 -->
    <!-- <div>姓名：<input type="text" v-model="name" /></div>
    <div>以上是{{ displayName }}完成的效果</div><br>
     -->
    <!-- 6、v-if 点击按钮 姓名切换成姓名+学号 -->
    
    <div v-if="showNameWithId">{{ nameWithId }}</div>
    <div v-else>{{ displayName }}</div>
    <button @click="changeDisplay" class="btn1">切换姓名显示方式</button><br>

    <!-- 7、v-show 点击按钮 隐藏图片 -->
    <button @click="hideImage" class="btn2">隐藏/显示图片</button>
    
    <!-- 8、v-for循环，显示所有指令 -->
    <div v-for="item in list" :key="item.id">
        序号{{ item.id }}--指令是：{{ item.msg }}
    </div>
</template>

<script setup>
import { ref, computed } from "vue";

const msg = "内置指令";
const msg1 = "这是zxy的页面</i>"

// 显示图片
let url = ref(new URL("../assets/img1.webp", import.meta.url).href);
let showImage = ref(true);
function showInfor() {
    url.value = new URL("../assets/img2.webp", import.meta.url).href;
};
// v-show 功能：隐藏/显示图片
function hideImage() {
    showImage.value = !showImage.value;
}


// 新增的响应式数据
const zxy = ('以上是zhouxinyao完成的效果')
const name = ref("周欣耀");
// const username = ref("ZXY");

// v-if 功能：切换姓名显示方式
const showNameWithId = ref(false);
const nameWithId = computed(() => `${name.value || 'zxy'} - 2430150136`);
const displayName = computed(() => name.value || 'zxy');

function changeDisplay() {
    showNameWithId.value = !showNameWithId.value;
}


// v-for 功能：指令列表
let list = [
    {id:1,msg:"v-text"},
    {id:2,msg:"v-html"},
    {id:3,msg:"v-bond"},
    {id:4,msg:"v-on"},
    {id:5,msg:"v-model"},
    {id:6,msg:"v-if"},
    {id:7,msg:"v-show"},
    {id:8,msg:"v-for"},
];
</script>

<style scoped>
.dv1 {
    font-size: 30px;
    font-weight: bold;
}

.img1{
  color: crimson;
}

.btn{
    background-color: chartreuse;
}

.btn1{
    background-color: aquamarine;
}

.btn2{
    background-color: darkkhaki;
}
</style>